<template>
  <div id="SelectTestView">
    <!-- 右边页面 -->
    <div class="SelectTestView-content">
      <button class="_btn1"
              @click="back_view">返回</button>
      <!-- 题目 -->
      <div class="SelectTestView-ti-block">
        <div class="answer-img"
             v-if="testArr[testNum]?(testArr[testNum].all_img.length !== 0?true:false):false">
          <template v-for="(item, index) in testArr[testNum]?testArr[testNum].all_img:[]">
            <img :src="baseUrl+item"
                 :key="index"
                 alt="">
          </template>
        </div>
        <div class="ti-block-content">
          <p style="white-space: pre-wrap;">{{testArr[testNum]?testNum + 1+'、': ''}}{{testArr[testNum]?testArr[testNum].title: ''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].title_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].title_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
          <p v-if="testArr[testNum]?testArr[testNum].A:''">A . {{testArr[testNum]?testArr[testNum].A:''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].A_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].A_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
          <p v-if="testArr[testNum]?testArr[testNum].B:''">B . {{testArr[testNum]?testArr[testNum].B:''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].B_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].B_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
          <p v-if="testArr[testNum]?testArr[testNum].C:''">C . {{testArr[testNum]?testArr[testNum].C:''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].C_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].C_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
          <p v-if="testArr[testNum]?testArr[testNum].D:''">D . {{testArr[testNum]?testArr[testNum].D:''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].D_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].D_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
          <p v-if="testArr[testNum]?testArr[testNum].E:''">E . {{testArr[testNum]?testArr[testNum].E:''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].E_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].E_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>
          </div>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]&&testArr[testNum].type === 'one'">
          请选择答案
          <el-radio v-model="radio"
                    label="A">A</el-radio>
          <el-radio v-model="radio"
                    label="B">B</el-radio>
          <el-radio v-model="radio"
                    v-if="testArr[testNum]?testArr[testNum].C:false"
                    label="C">C</el-radio>
          <el-radio v-model="radio"
                    v-if="testArr[testNum]?testArr[testNum].D:false"
                    label="D">D</el-radio>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]?testArr[testNum].type === 'question' || testArr[testNum].type === 'indefinite' :''">
          请选择答案
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="A"></el-checkbox>
            <el-checkbox label="B"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].C:false"
                         label="C"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].D:false"
                         label="D"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].E:false"
                         label="E"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]&&testArr[testNum].type === 'judge'">
          请选择答案
          <el-radio v-model="radio"
                    label="A">A</el-radio>
          <el-radio v-model="radio"
                    label="B">B</el-radio>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]?testArr[testNum].type === 'brief' || testArr[testNum].type === 'pack':'' ">
          请选择答案
          <span>本题不支持作答，请自行作答后核对答案并查看解析</span>

        </div>
        <div class="ti-block-action">
          <button @click="click_answer_comment">{{answerComment}}</button>
          <button @click="click_redo">重做</button>
          <button @click="dialogNoteVisible = true">笔记</button>
          <button @click="click_collection">{{collection?'取消收藏':'收藏'}}</button>
          <button @click="dialogFormVisible = true">评论</button>
          <button @click="dialogErrVisible = true">纠错</button>
          <button v-if="wrongNote === 1"
                  @click='click_remove_wrong'>移除错题</button>
          <button v-else-if="wrongNote === 2"
                  @click="click_remove_note">移除笔记</button>
        </div>
        <div class="ti-block-answer">
          <div class="answer"
               v-show="answerShow">
            <p style="white-space: pre-wrap;">
              <span>【正确答案】</span>
              <template v-for="(item, index) in (testArr[testNum]?testArr[testNum].answer:[])">
                <span :key="index">{{item}}&nbsp;&nbsp;</span>
              </template>
            </p>
            <div class="answer-img"
                 v-show="testArr[testNum]?(testArr[testNum].answer_img.length !== 0?true:false):false">
              <template v-for="(item, index) in testArr[testNum]?testArr[testNum].answer_img:[]">
                <img :src="baseUrl+item"
                     :key="index"
                     alt="">
              </template>
            </div>
            <p style="white-space: pre-wrap;">【答案解析】<span>{{testArr[testNum]?testArr[testNum].analysis[0]:'暂无解析'}}</span></p>
            <div class="answer-img"
                 v-show="testArr[testNum]?(testArr[testNum].analysis_img.length !== 0?true:false):false">
              <template v-for="(item, index) in testArr[testNum]?testArr[testNum].analysis_img:[]">
                <img :src="baseUrl+item"
                     :key="index"
                     alt="">
              </template>
            </div>
          </div>
          <div class="comment"
               v-show="commentShow">
            <p>【全部评论】</p>
            <template v-for="(item, index) in discuss">
              <div class="comment-item"
                   :key="index">
                <img src="../assets/img/header.png"
                     alt="">
                <div>
                  <span>{{item.nike_name?item.nike_name:mobile}}</span>
                  <p>{{item.content?item.content: '无评论'}}</p>
                </div>
                <p class="comment-item-date">{{item.create_time?item.create_time:'刚刚'}}</p>
              </div>
            </template>

          </div>
        </div>
      </div>
      <!-- 完成数量 -->
      <div class="SelectTestView-ti-num">
        <button class="btn1"
                @click="next_test(-1)">上一题</button>
        <button class="btn2"
                @click="next_test(1)">下一题</button>
        <span>总题数：{{testArr.length}}题</span>
        <span>已完成：{{overTest}}题</span>
        <span>未完成：{{testArr.length-overTest}}题</span>
        <span class="red">错误</span>
        <span class="green">正确</span>
      </div>
      <!-- 题目小框 -->
      <div class="SelectTestView-ti-span">
        <span v-for="(item,index) in testArr"
              :key="index"
              :class="[item.isErr?(item.isErr === 1? 'green-bg': 'red-bg'): '', index === testNum? 'border' : '']"
              @click="click_test(index)">{{index + 1}}</span>
      </div>
    </div>
    <!-- 评论的弹窗 -->
    <el-dialog title="评论"
               :visible.sync="dialogFormVisible"
               width="30%">
      <el-input v-model="form.content"
                type="textarea"
                :autosize="{ minRows: 4}"
                placeholder="请输入反馈内容"
                auto-complete="off"></el-input>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="click_add_comment">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 笔记的弹窗 -->
    <el-dialog title="笔记"
               :visible.sync="dialogNoteVisible"
               width="30%">
      <el-input v-model="noteFrom.content"
                type="textarea"
                :autosize="{ minRows: 4}"
                placeholder="请输入笔记内容"
                auto-complete="off"></el-input>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogNoteVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="add_note">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 纠错的弹窗 -->
    <el-dialog title="错误描述"
               :visible.sync="dialogErrVisible"
               width="30%">
      <el-form :model="errForm">
        <el-form-item>
          <el-input v-model="errForm.name"
                    type="textarea"
                    :autosize="{ minRows: 4}"
                    placeholder="请输入错误内容"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="错误类型"
                      class="aaa">
        </el-form-item>
        <el-form-item>
          <el-select v-model="errForm.region"
                     placeholder="请选择错误类型">
            <el-option label="题干有误"
                       value="1"></el-option>
            <el-option label="答案有误"
                       value="2"></el-option>
            <el-option label="答案解析有误"
                       value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogErrVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="click_err">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 历史纪录弹窗 -->
    <el-dialog class="history_box"
               title="检测到您的历史纪录"
               :visible.sync="dialogHistoryVisible"
               width="30%">
      <div class="historyBtn">
        <button class="btn1">继续做题</button>
        <button class="btn2">做题记录</button>
        <button class="btn3">清空重做</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '../api/utils.js'
import { Promise } from 'q'

export default {
  inject: ['reload'],
  name: 'SelectTestView',
  components: {},
  props: ['title', 'viewIndex', 'wrongNote'],
  data () {
    return {
      // 接口地址
      url: '',
      mobile: '',
      // 打分的弹窗
      dialogVisible: false,
      dialogData: '', // 打分的数据
      // 评论的弹窗
      dialogFormVisible: false,
      form: {
        content: ''
      },
      // 笔记的弹窗
      dialogNoteVisible: false,
      noteFrom: {
        content: ''
      },
      oldNote: false, // 判断以前有没有笔记
      // 纠错的弹窗
      dialogErrVisible: false,
      errForm: {
        name: '',
        region: ''
      },
      // 历史纪录的弹窗
      dialogHistoryVisible: false,
      // 树形导航
      data: [],
      defaultProps: {
        children: 'children',
        label: 'goods_name'
      },
      // promise的模拟
      data1: [],
      // 搜索弹窗表格数据
      searchTableData: [
        {
          title: '以权责发生制为核算基础，下列不属于本....',
          from: '第一章 会计概述',
          type: '单选题',
          date: '2019-03-28 08:33:50'
        }
      ],
      // 答案单选
      radio: '',
      // 答案多选
      checkList: [],
      // 历年真题或者是模拟考试的判断条件
      selectionStatus: false,
      // 检测点击重复的子导航
      selectId: '',
      // 装试题的数组
      testArr: [],
      // 当前所在的试题
      testNum: 0,
      // 完成的答题
      overTest: 0,
      // 答案显示
      answerShow: false,
      // 评论显示
      commentShow: false,
      // 答案评论的切换按钮
      answerComment: '显示答案',
      // 是否收藏的数据
      collection: false,
      // 试题评论
      discuss: '',
      // 考试时间
      testTimes: '02：00：00',
      times: 7200,
      timer: null
    }
  },

  computed: {},

  watch: {
    testNum (newValue, oldValue) {
      // 监听变化时获取笔记
      this.oldNote = false
      this.$http.note({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        console.log(res)
        this.noteFrom = res.data.data
        this.oldNote = true
      }).catch((err) => {
        console.log(err)
        this.noteFrom = { contetn: '' }
      })
      // 获取题目是否收藏
      this.$http.comment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        console.log(res)
        this.collection = res.data.data
      }).catch((err) => {
        console.log(err)
      })
      // 获取题目评论 第一题
      this.$http.getComment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        console.log(res)
        this.discuss = res.data.data
      }).catch((err) => {
        console.log(err)
      })
    }
  },

  mounted () {
    this.url = JSON.parse(localStorage.getItem('customData')).url
    this.mobile = localStorage.getItem('mobile')

    /*  // 给导航赋值
    // 获取章节练习的数据 */
    // promise
    let promiseItem = new Promise((resolve, reject) => {
      console.log(this.$store.state.errData)
      if (this.$store.state.errData.length !== 0) {
        this.testArr = this.$store.state.errData
        resolve(this.$store.state.errData)
      } else {
        if (this.viewIndex === 1) { // 错题
          this.$http.wrong({
            phone: localStorage.getItem('mobile')
          }).then((res) => {
            console.log(res)
            // this.tableData = res.data.data
            this.testArr = res.data.data
            resolve(res.data.data)
          }).catch((err) => {
            console.log(err)
          })
        } else if (this.viewIndex === 2) { // 收藏的题目
          this.$http.collectList({
            phone: localStorage.getItem('mobile')
          }).then((res) => {
            this.testArr = res.data.data
            resolve(res.data.data)
          }).catch((err) => {
            console.log(err)
          })
        }
      }
    })
    promiseItem.then((res) => {
      console.log(res)
      return new Promise((resolve, reject) => {
        console.log(res)
        // 获取笔记 第一题
        this.$http.note({
          phone: localStorage.getItem('mobile'),
          type: res[0].type,
          qid: res[0].qid,
          custom_extend: 1
        }).then((res) => {
          // console.log(res)
          this.noteFrom = res.data.data
          this.oldNote = true
        }).catch((err) => {
          console.log(err)
          this.noteFrom = { contetn: '' }
        })
        // 获取题目是否收藏 第一题
        this.$http.comment({
          phone: localStorage.getItem('mobile'),
          type: res[0].type,
          qid: res[0].qid,
          custom_extend: 1
        }).then((res) => {
          // console.log(res)
          this.collection = res.data.data
        }).catch((err) => {
          console.log(err)
        })
        // 获取题目评论 第一题
        this.$http.getComment({
          phone: localStorage.getItem('mobile'),
          type: res[0].type,
          qid: res[0].qid,
          custom_extend: 1
        }).then((res) => {
          console.log(res)
          this.discuss = res.data.data
        }).catch((err) => {
          console.log(err)
        })
      })
    })
  },
  destroyed () {
    clearInterval(this.timer)
  },

  // beforeUpdate () {
  //   console.log(this.navData)
  // },
  // updated () {
  //   console.log(this.navData)
  // },

  methods: {
    // 上一题、下一题
    next_test (num) {
      // 切换试题
      if ((this.testNum + num) < 0 || (this.testNum + num) === this.testArr.length) {
        this.$message({
          message: '到头了~~',
          type: 'warning'
        })
        this.judge_answer()
        // this.old_answer()
        return false
      } else {
        this.judge_answer()
        // this.old_answer()
        this.testNum = this.testNum + num
        // 隐藏答案与评论
        this.commentShow = false
        if (this.testArr[this.testNum].isErr) {
          this.answerShow = true
          this.answerComment = '显示评论'
        } else {
          this.answerShow = false
          this.answerComment = '显示答案'
        }
      }
      // console.log(this.testArr[this.testNum + num].isErr)
      if (this.testArr[this.testNum].isErr) {
        // console.log(this.testArr[this.testNum].oldSelect)
        // 分别判断不同类型的答案 单选和判断
        if (this.testArr[this.testNum].type === 'one' || this.testArr[this.testNum].type === 'judge') {
          this.radio = this.testArr[this.testNum].oldSelect[0]
        }
        // 分别判断不同类型的答案 多选
        if (this.testArr[this.testNum].type === 'question' || this.testArr[this.testNum].type === 'indefinite') {
          this.checkList = this.testArr[this.testNum].oldSelect
        }
      }
    },
    // 点击题目
    click_test (num) {
      this.judge_answer()
      this.testNum = num
      this.old_answer(num)
      // 隐藏答案与评论
      this.commentShow = false
      if (this.testArr[this.testNum].isErr) {
        this.answerShow = true
        this.answerComment = '显示评论'
      } else {
        this.answerShow = false
        this.answerComment = '显示答案'
      }
    },
    // 返回答完的题时，有答过的答案
    old_answer (num) {
      // console.log(this.testArr[num].isErr)
      if (this.testArr[num].isErr) {
        // 分别判断不同类型的答案 单选和判断
        if (this.testArr[num].type === 'one' || this.testArr[num].type === 'judge') {
          this.radio = this.testArr[num].oldSelect[0]
        }
        // 分别判断不同类型的答案 多选
        if (this.testArr[num].type === 'question' || this.testArr[num].type === 'indefinite') {
          this.checkList = this.testArr[num].oldSelect
        }
      } else {
        // console.log('undefined')
        this.checkList = []
        this.radio = ''
      }
    },
    // 判断答案
    judge_answer () {
      // 分别判断不同类型的答案 单选和判断
      if (this.testArr[this.testNum].type === 'one' || this.testArr[this.testNum].type === 'judge') {
        if (this.radio) {
          let radioArr = [this.radio]
          let radioS = util.equar(radioArr, this.testArr[this.testNum].answer)
          this.testArr[this.testNum].oldSelect = radioArr
          if (radioS) {
            this.testArr[this.testNum].isErr = 1
          } else {
            this.testArr[this.testNum].isErr = 2
          }
          this.radio = ''
          this.overTest += 1
        }
      }
      // 分别判断不同类型的答案 多选
      if (this.testArr[this.testNum].type === 'question' || this.testArr[this.testNum].type === 'indefinite') {
        // console.log(this.checkList)
        if (this.checkList.length !== 0) {
          this.testArr[this.testNum].oldSelect = this.checkList
          let checkS = util.equar(this.checkList, this.testArr[this.testNum].answer)
          if (checkS) {
            this.testArr[this.testNum].isErr = 1
          } else {
            this.testArr[this.testNum].isErr = 2
          }
          this.checkList = []
          this.overTest += 1
        }
      }
      // 分别判断不同类型的答案 简答题
      if (this.testArr[this.testNum].type === 'brief' || this.testArr[this.testNum].type === 'pack') {
        // console.log(this.checkList)
        this.testArr[this.testNum].isErr = 1
      }
    },
    // 切换答案和评论的点击事件
    click_answer_comment () {
      if (!this.answerShow) {
        this.answerShow = true
        this.commentShow = false
        this.answerComment = '显示评论'
      } else {
        this.answerShow = false
        this.commentShow = true
        this.answerComment = '显示答案'
      }
    },
    // 点击重做
    click_redo () {
      // console.log(this.testArr[this.testNum])
      if (this.testArr[this.testNum].isErr) {
        this.$set(this.testArr[this.testNum], 'isErr', null)
        this.$set(this.testArr[this.testNum], 'oldSelect', [])
        this.checkList = []
        this.radio = ''
      } else {
        this.checkList = []
        this.radio = ''
      }
    },
    // 添加/修改笔记
    add_note () {
      this.dialogNoteVisible = false
      if (this.oldNote) {
        // 修改笔记
        this.$http.editNote({
          phone: localStorage.getItem('mobile'),
          id: this.noteFrom.nid,
          content: this.noteFrom.content
        }).then((res) => {
          console.log(res)
          this.$message({
            message: '修改笔记成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      } else {
        // 新增笔记
        this.$http.addNote({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid,
          content: this.noteFrom.content
        }).then((res) => {
          console.log(res)
          this.$message({
            message: '保存笔记成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 点击收藏
    click_collection () {
      if (this.collection) { // 取消收藏
        this.$http.delCollect({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid
        }).then((res) => {
          console.log(res)
          this.collection = false
          this.$message({
            message: '取消收藏',
            type: 'success'
          })
          this.reload()
        }).catch((err) => {
          console.log(err)
        })
      } else { // 收藏
        this.$http.collect({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid
        }).then((res) => {
          console.log(res)
          this.collection = true
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 添加评论
    click_add_comment () {
      this.dialogFormVisible = false
      this.$http.addComment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[this.testNum].type,
        qid: this.testArr[this.testNum].qid,
        content: this.form.content
      }).then((res) => {
        console.log(res)
        // 刚刚评论的push进数组
        console.log(this.discuss)
        this.discuss.push({
          content: this.form.content,
          create_time: '',
          header_img: '',
          nike_name: ''
        })
        console.log(this.discuss)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击纠错
    click_err () {
      this.dialogErrVisible = false
      if (this.errForm.name) {
        this.$http.addComment({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid,
          content: '(错题反馈)' + this.errForm.name
        }).then((res) => {
          // console.log(res)
          this.$message({
            message: '上传错误成功',
            type: 'success'
          })
          // 刚刚评论的push进数组
        }).catch((err) => {
          console.log(err)
        })
      } else {
        this.$message({
          message: '请填写错误内容',
          type: 'warning'
        })
      }
    },
    // 移除错题
    click_remove_wrong () {
      this.$http.delWrong({
        phone: localStorage.getItem('mobile'),
        id: this.testArr[this.testNum].qid
      }).then((res) => {
        // console.log(res)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // this.$router.go(0)
        this.reload()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 移除笔记
    click_remove_note () {
      console.log(this.noteFrom.nid)
      this.$http.delNote({
        phone: localStorage.getItem('mobile'),
        id: this.noteFrom.nid
      }).then((res) => {
        // console.log(res)
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // this.$router.go(0)
        this.reload()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 返回上个显示的界面 --- 没做完
    back_view () {
      // this.$router.go(-1)
      console.log(11)
      this.$emit('listenViewStatus', false)
    }
  }
}

</script>
<style lang='less'>
#SelectTestView {
  // overflow: hidden;
  height: calc(100% - 108px);
  // height: 100%;
  // 左边导航
  .SelectTestView-nav {
    float: left;
    width: calc(22% - 54px);
    background: #f5f5f5;
    // height: 100%;
    height: calc(100% - 30px);
    padding: 30px 0 0 54px;
    text-align: left;
    overflow: auto;
    .SelectTestView-btn {
      button {
        padding: 5px 10px;
        background: #f5f5f5;
        border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 10px;
        color: #333333;
      }
    }
    .SelectTestView-title {
      color: #333333;
      .SelectTestView-title-box {
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0;
      }
      .el-tree {
        background: none;
        .el-tree-node {
          .el-tree-node__content {
            .el-tree-node__label {
              font-weight: bold;
              width: calc(100% - 24px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .el-tree-node__children {
            .el-tree-node {
              .el-tree-node__content {
                .el-tree-node__expand-icon::before {
                  display: none;
                }
                .el-tree-node__label {
                  width: 100%;
                  font-weight: normal;
                }
              }
            }
          }
        }
      }
    }
  }
  // 右边内容
  .SelectTestView-content {
    float: left;
    width: calc(100% - 80px);
    height: calc(100% - 20px);
    background: white;
    text-align: left;
    padding: 20px 40px 0;
    font-size: 14px;
    ._btn1{
      border: none;
      padding: 8px 30px;
      color: white;
      margin: 20px 0;
      background: url("../assets/img/hand_btn.png");
      background-size: 100% 100%;
    }
    .SelectTestView-content-btn {
      margin-bottom: 20px;
      button {
        background: url("../assets/img/hand_btn.png");
        background-size: 100% 100%;
        border: none;
        padding: 8px 10px;
        color: white;
      }
      p {
        float: right;
        color: #ff0000;
        line-height: 30px;
        span {
          margin-right: 40px;
        }
      }
    }
    .SelectTestView-ti-block {
      height: 65%;
      overflow: auto;
      .ti-block-content {
        p {
          padding: 10px 0;
        }
      }
      .ti-block-sel {
        margin: 20px 0;
        .el-radio {
          margin: 0 0 0 50px;
        }
        .el-checkbox-group {
          display: inline-block;
          margin: 0 0 0 50px;
        }
      }
      .ti-block-action {
        margin-bottom: 20px;
        button {
          padding: 5px 10px;
          background: white;
          border: 1px solid rgba(217, 217, 217, 1);
          border-radius: 10px;
          color: #333333;
          margin-right: 20px;
        }
        button:hover {
          background: #6bb8f6;
          color: white;
        }
      }
      .ti-block-answer {
        .answer {
          p {
            margin: 10px 0;
          }
        }
        .comment {
          .comment-item {
            margin: 20px;
            line-height: 20px;
            position: relative;
            overflow: hidden;
            img {
              width: 40px;
              height: 40px;
              float: left;
              margin-right: 15px;
              // vertical-align: middle;
            }
            div {
              float: left;
              span {
                color: #999999;
                font-size: 12px;
              }
            }
            .comment-item-date {
              float: right;
              color: #999999;
              font-size: 12px;
            }
          }
        }
      }
    }
    .SelectTestView-ti-num {
      margin: 10px 0;
      button {
        border: none;
        padding: 10px 20px;
        margin-right: 15px;
      }
      .btn1 {
        background: url("../assets/img/trial.png") no-repeat;
        background-size: 100% 100%;
        color: #999999;
      }
      .btn2 {
        background: url("../assets/img/pay.png") no-repeat;
        background-size: 100% 100%;
        color: white;
      }
      span {
        font-size: 14px;
        margin: 20px;
        position: relative;
      }
      .red:after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        background: #ff0000;
        top: 3px;
        left: -15px;
      }
      .green:after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        background: #00db0f;
        top: 3px;
        left: -15px;
      }
    }
    .SelectTestView-ti-span {
      height: 10%;
      overflow: auto;
      span {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #999999;
        background: #d9d9d9;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .red-bg {
        background: #ff0000;
        color: white;
      }
      .green-bg {
        background: #00db0f;
        color: white;
      }
      .border {
        border: 1px solid blue;
      }
    }
  }

  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 10px;
      .el-dialog__header {
        text-align: left !important;
        .el-dialog__title {
          font-size: 14px;
        }
        .el-dialog__headerbtn {
          background: #ff0000;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          .el-icon-close {
            color: white;
            line-height: 16px;
          }
        }
      }
      .el-dialog__body {
        padding: 0 20px;
        text-align: center;
        .dialog-title {
          font-size: 24px;
        }
        .dialog-grade {
          p {
            display: inline-block;
            width: 50%;
            margin: 30px 0 20px;
          }
        }
        .dislog-num {
          margin: 15px;
          p {
            display: inline-block;
            width: 33.33%;
          }
        }
        .dislog-btn {
          padding: 20px 0;
          button {
            border: none;
            padding: 8px 10px;
            color: white;
            margin: 0 40px;
          }
          & > button:first-child {
            background: url("../assets/img/hand_btn.png");
            background-size: 100% 100%;
          }
          & > button:last-child {
            background: url("../assets/img/err_btn.png");
            background-size: 100% 100%;
          }
        }
        .el-select {
          display: block;
        }
        .aaa {
          margin-bottom: 0;
        }
        .historyBtn {
          padding: 20px 0;
          button {
            padding: 5px 10px;
            margin: 0 15px;
            border: none;
            color: white;
          }
          .btn1 {
            background: url("../assets/img/hand_btn.png");
            background-size: 100% 100%;
          }
          .btn2 {
            background: url("../assets/img/history.png");
            background-size: 100% 100%;
          }
          .btn3 {
            background: url("../assets/img/err_btn.png");
            background-size: 100% 100%;
          }
        }
      }
      .el-dialog__footer {
        .dialog-footer {
          .el-button {
            padding: 8px 20px;
          }
        }
      }
    }
  }
  // 历史纪录弹窗
  .history_box {
    .el-dialog {
      .el-dialog__header {
        text-align: center !important;
        .el-dialog__headerbtn {
          display: none;
        }
      }
    }
  }
  // 试题搜索弹窗
  .search-box {
    .el-dialog {
      .el-dialog__header {
        background: #64b5f6;
        border-radius: 10px 10px 0 0;
        .el-dialog__title {
          font-size: 18px;
          color: white;
        }
        .el-dialog__headerbtn {
          display: none;
        }
      }
      .el-dialog__body {
        text-align: left;
        .search-sou {
          padding: 20px 0 30px;
          input {
            width: 55%;
            border-radius: 10px;
            border: none;
            background: #f5f5f5;
            padding: 10px;
            margin-right: 20px;
          }
          button {
            padding: 8px 15px;
            border-radius: 10px;
            border: none;
            color: white;
            background: #64b5f6;
          }
        }
        .search-table {
          .el-table {
            border-radius: 5px;
            .cell {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .el-table__header-wrapper {
              .el-table__header {
                .has-gutter {
                  tr {
                    background: #c4e5ff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
